<template>
  <div>
    <el-row>
      <el-col :span="4">
        <div class="tree">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree
            @node-click="handler"
            class="filter-tree"
            :data="empData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            ref="tree"
          >
          </el-tree>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="20">
        <div v-if="params.id">
          <div class="engineer">
            <div class="title"><i class="el-icon-s-goods"></i>工程信息</div>
            <div class="contant">
              <el-form :model="DevData" label-width="120px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="工程编号"
                      prop="engineer.serial_number"
                    >
                      <span>{{ DevData.engineer.serial_number }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工程名称" prop="engineer.name">
                      <span>{{ DevData.engineer.name }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工程类型" prop="engineer.type">
                      <span>{{ DevData.engineer.type }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工程状态" prop="engineer.status">
                      <template>
                        <el-tag
                          v-if="DevData.engineer.status == '监测中'"
                          type="success"
                          >{{ DevData.engineer.status }}</el-tag
                        >
                        <el-tag
                          v-else-if="DevData.engineer.status == '未绑定'"
                          type="warning"
                          >{{ DevData.engineer.status }}</el-tag
                        >
                        <el-tag v-else type="danger">{{
                          DevData.engineer.status
                        }}</el-tag>
                      </template>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="开始时间" prop="engineer.begin_time">
                      <span>{{ DevData.engineer.begin_time }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="结束时间" prop="engineer.end_time">
                      <span>{{ DevData.engineer.end_time }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-form-item label="地址" prop="engineer.address">
                    <span>{{ DevData.engineer.address }}</span>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="负责人" prop="engineer.charge_id">
                    <span>{{ DevData.engineer.charge_id }}</span>
                  </el-form-item>
                </el-row>
              </el-form>
            </div>
          </div>

          <!-- 设备信息 -->
          <div class="device">
            <div class="title"><i class="el-icon-s-tools"></i>设备信息</div>
            <div class="contant">
              <el-form :model="DevData" label-width="120px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工程设备" prop="serial_number">
                      <span>{{ DevData.serial_number }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备名称" prop="name">
                      <span>{{ DevData.name }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="绑定状态" prop="bind_status">
                      <template>
                        <el-tag
                          v-if="DevData.bind_status == '1'"
                          type="success"
                          >{{ "已绑定" }}</el-tag
                        >
                        <el-tag
                          v-else-if="DevData.bind_status == '0'"
                          type="warning"
                          >{{ "未绑定" }}</el-tag
                        >
                      </template>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="在线状态" prop="online_status">
                      <template>
                        <el-tag
                          v-if="DevData.online_status == '1'"
                          type="success"
                          >{{ "在线" }}</el-tag
                        >
                        <el-tag
                          v-else-if="DevData.online_status == '0'"
                          type="warning"
                          >{{ "离线" }}</el-tag
                        >
                      </template>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <div v-else style="text-align: center; color: red; line-height: 50px">
          请选择设备进行查看
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      filterText: "",
      empData: [],
      defaultProps: {
        children: "children",
        // 节点标签对应对象属性值
        label: "name",
      },

      params: {
        id: 0,
      },
      DevData: null,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    handler(val, node) {
      if (!val.children) {
        this.params.id = val.id;
        this.getDevData();
      }
    },

    async getDevData() {
      let res = await get("/device/findDeviceDetail", this.params);
      this.DevData = res.data;
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    async getEmpData() {
      let res = await get("/dashboard/findEngineerDeviceTree");
      this.empData = res.data;
    },
  },
  created() {
    this.getEmpData();
  },
};
</script>

<style lang="scss" scoped>
.tree {
  height: calc(100vh - 60px);
  border-right: 1px solid #ededed;
  padding-right: 10px;
  margin-right: 10px;
}
.engineer,
.device {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
}
</style>